<template>
	<view>
		<view class="container">
			<com-head textTit="员工" :typeVal="1" :scrollTop="scrollTop"></com-head>
			
			<!-- 搜索 -->
			<view class="serchBox">
				<u-icon name="search" color="#999999" size="26"></u-icon>
				<input type="text" @input="serchList()" v-model.trim="name" value="" placeholder="搜索员工名称" placeholder-style="color:#999999"/>
			</view>
			<!-- 没有员工 -->
			<!-- <view class="noShop" v-if="!list.length">
				<text>无</text>
				<text class="iconfont " :class="isCheck ? 'icon-a-xingzhuang1' : 'icon-weixuanzhong' "></text>
			</view> -->
			<!-- 员工列表 -->
			<view class="personalList" v-if="list.length">
				<view class="lsit" v-for="(ele,index) in list" :key="index">
					<view class="info">
						<image :src="ele.staff_avatar" mode="aspectFill"></image>
						<view>
							<view class="infoT">
								<!-- 女 -->
								<image v-if="ele.staff_gender == 2" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/nv.png" mode=""></image>
								<!-- 男 -->
								<image v-if="ele.staff_gender == 1" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/nan.png" mode=""></image>
								<text>{{ele.name}}</text>
							</view>
							<view class="infoB">
								工号：{{ele.number}}
							</view>
							<!-- <image class="QRcode" @click="imgFun(ele.qrcode)" :src="ele.qrcode"></image> -->
						</view>
					</view>
					<!-- <text @click="chioseUser(ele)" class="iconfont " :class="ele.isCheck ? 'icon-a-xingzhuang1' : 'icon-weixuanzhong' "></text> -->
					<image @click="chioseUser(ele)" class="imgPls" :src="ele.isCheck ? '//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/dui.png' : '//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/xuanze.png'"></image>
				</view>
			</view>
			
			<!-- 二维码弹窗 -->
			<u-popup v-model="show" safe-area-inset-bottom mode="center" :closeable="false" border-radius="40" @close="close">
				<view class="popMain">
					<view class="specification">
						<image class="specification-header" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg7.png"></image>
						<br>
						<image class="specification-qr" :src="popImg"></image>
						<br>
						<view class="specification-title">长按识别二维码添加我</view>
						<image class="specification-close" @click="close" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/close23232.png"></image>
					</view>
				</view>
			</u-popup>

		</view>
		
		<view class="footerC">
			<view class="chioseTime" @click="jump('','back')">确定</view>
		</view>
	</view>
</template>
<script>
	var util= require("@/common/utils.js")
	export default {
		data() {
			return {
				list:[
					// {staff_avatar: '//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/mine1.png', staff_gender:1,number: 8989,name:'技师名字'},
					// {staff_avatar: '//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/mine1.png', staff_gender:2,number: 8989,name:'技师名字'}
					],
				date:'',
				name:'',
				start_time:'',
				end_time:'',
				projectList:[],
				show: false,
				popImg: '',
				typeT: false,
				scrollTop: 0
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		async onLoad({type}) {
			console.log('this.fid------', this.fid)
			if (type || this.fid) {
				this.typeT = true
			}
			let time = this.makeDays+' '+this.makeTime
			let start_time = Date.parse(new Date(time.replace(/\-/g, '/')))
			console.log(11, this.makeDays, this.makeTime, start_time)
			this.start_time = start_time / 1000
			console.log(this.start_time,"this.start_time")
			// this.date = util.formatDate(new Date());
			// 获取预约项目
			if(this.chioseProjects.length){
				this.projectList = [...this.chioseProjects,...this.makeProject]
			}else{
				this.projectList = [...this.makeProject]
			}
			let end_time = 0
			this.projectList.forEach((ele)=>{
				end_time += ele.duration * 60 
			})
			this.end_time = end_time + this.start_time
			console.log(time,"this.end_time",new Date(this.end_time*1000))
			this.getTechList()
		},
		methods: {
			imgFun(img) {
				this.popImg = img
				this.show = true
			},
			close() {
				this.show = false
			},
			// 搜索技师
			serchList(){
				if(this.timer) {
					clearTimeout(this.timer);
				}
				this.timer = setTimeout(() => {
					this.list=[]
					this.getTechList()
				}, 800);
			},
			// 选择技师
			chioseUser(ele){
				let num = this.makeNum
				if(!this.typeT && !ele.isCheck&&this.makeTech.length >= num){
					this.utlis.Toast("选择的技师不能多于预约人员")
					return
				}
				console.log(34, this.typeT,this.makeTech, this.makeTech.length >= 1)
				if (this.typeT && this.makeTech.length >= 1) {
					if (ele.isCheck) {
						ele.isCheck = false
						this.$u.vuex("makeTech", [])
						return
					}
					this.utlis.Toast("只能选择一个")
					return
				}
				ele.isCheck = !ele.isCheck
				let arr = []
				this.list.forEach(ele=>{
					if(ele.isCheck){
						arr.push(ele)
					}
					this.$u.vuex("makeTech",arr)
				})
			},
			async getTechList(){
				let parmas={
					end_time:this.end_time,
					start_time:this.start_time,
					name:this.name,
					store_id:this.makeStore_id,
					date:this.makeDays,
					id: this.fid || ''
				}
				console.log(parmas, this.typeT,"parmas")
				let API = this.typeT ? this.$u.api.getStaff : this.$u.api.getTech
				let {data,code} = await API(parmas);
				if(this.makeTech.length){
					data.forEach(ele=>{
						if (ele.avatar) ele.staff_avatar = ele.avatar
						if (ele.gender) ele.staff_gender = ele.gender
						this.makeTech.forEach((item)=>{
							// console.log(88, item, ele)
							if(ele.staff_id == item.staff_id){
								ele.isCheck = true
							}
						})
					})
				}else{
					data.forEach(ele=>{
						if (ele.avatar) ele.staff_avatar = ele.avatar
						if (ele.gender) ele.staff_gender = ele.gender
						ele.isCheck = false
					})
				}
				this.list = data
				
				// this.list.forEach(ele=>{
				// 	this.list.push(ele)
				// })
				console.log(44, this.list)
			}
		}
	}
</script>
<style lang="scss" scoped >
.container{
	padding: 50rpx 32rpx;
	.icon-a-xingzhuang1{
		color: rgba(209,184,125,1);
		font-size: 42rpx !important;
	}
	.icon-weixuanzhong{
		color: #979797;
		font-size: 42rpx !important;
	}
	
	.personalList{
		margin-top: 32rpx;
		padding-bottom: 200rpx;
		.lsit{
			padding: 24rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.info{
				display: flex;
				>image{
					width: 144rpx;
					height: 144rpx;
					border-radius: 8rpx;
					border: 1rpx solid #ededed;
				}
				.infoT{
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #1D2129;
					margin-left: 18rpx;
					image{
						width: 34rpx;
						height: 34rpx;
						margin-right: 6rpx;
					}
				}
				.infoB{
					margin-top: 14rpx;
					margin-left: 18rpx;
					font-size: 20rpx;
					color: #999999;
				}
				.QRcode{
					width: 50rpx;
					height: 50rpx;
					border-radius: 5rpx;
					margin-left: 18rpx;
					margin-top: 15rpx;
				}
			}
			.imgPls{
				width: 110rpx;
				height: 48rpx;
				border-radius: 49rpx;
				position: relative;
				top: 40rpx;
			}
		}
	}
	.noShop{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 70rpx;
		background: #ffffff;
		border-radius: 20rpx;
		color: #333333;
		font-size: 26rpx;
		padding: 0 32rpx;
		margin-bottom: 30rpx;
	}
	.serchBox{
		// width: 560rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		line-height: 72rpx;
		height: 72rpx;
		background: rgba(255,255,255,0.4);
		border-radius: 60rpx;
		box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0,0,0,0.07); 
		display: flex;
		align-items: center;
		input{
			color: #333333;
			padding-left: 20rpx;
		}
	}
	.popMain{
		height: 900rpx;
		// border: 1rpx solid saddlebrown;
	}
	.specification{
		width: 650rpx;
		height: 736rpx;
		// border: 1rpx solid red;
		background-image: url('//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg99.png');
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		text-align: center;
		&-header{
			width: 143rpx;
			height: 142rpx;
			border-radius: 60%;
			margin-top: 17rpx;
		}
		&-qr{
			width: 346rpx;
			height: 350rpx;
			border-radius: 15rpx;
			margin-top: 70rpx;
		}
		&-title{
			margin-top: 40rpx;
			color: #999999;
			font-size: 24rpx;
		}
		&-close{
			width: 69rpx;
			height: 69rpx;
			position: absolute;
			bottom: -100rpx;
			left: 45%;
			// border: 1rpx solid red;
		}
	}

}
.footerC{
	width: 100%;
	background: white;
	position: fixed;
	bottom: 0rpx;
	height: 200rpx;
	padding-bottom: env(safe-area-inset-bottom);
	padding-top: 30rpx;
}
.chioseTime{
	width: 686rpx;
	line-height: 96rpx;
	text-align: center;
	background: linear-gradient(140deg,#50DCC2 0%, #007664);
	border-radius: 48rpx;
	color: #FFFFFF;
	font-size: 32rpx;
	margin: 0 auto;
}
::v-deep .u-mode-center-box{
	background: transparent !important;
}
</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
